<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-10 17:20:22
-->
<template>
  <div class="head">
    <nav class="navbar navbar-default  navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="" src="../image/logo.png" />
          </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input
                type="text"
                class="form-control"
                placeholder="大家正在搜：html入门"
              />
              <button type="button" class="btn" aria-label="Left Align">
                <span
                  class="glyphicon glyphicon-search"
                  aria-hidden="true"
                ></span>
              </button>
            </div>
          </form>
          <button type="button" class="btn2">
            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
            首页
          </button>
           <button type="button" class="btn2">
            <span class="glyphicon glyphicon-expand" aria-hidden="true"></span>
            视频
          </button>
           <button type="button" class="btn2">
            <span class="glyphicon glyphicon-send" aria-hidden="true"></span>
            发现
          </button>
           <button type="button" class="btn2">
            <span class="glyphicon glyphicon-plane" aria-hidden="true"></span>
            游戏
          </button>
          <button type="button" class="btn3"><router-link to="Apply">注册</router-link></button>
          |
          <button type="button" class="btn3">登录</button>
        </div>
      </div>
    </nav>
  </div>
</template>
<style scoped>
.head{
  padding-bottom: 70px;
}
.navbar-brand {
  height: 100%;
  padding: 0px 20px 0px 150px;
}
.container-fluid {
  background-color: #ffffff;
}
.form-control {
  width: 400px;
  margin-top: 5px;
}
.btn {
  margin-top: 5px;
  margin-right: 150px;
}
.btn:hover{
  color: #fa7d55;
}
.btn2{
  background-color: #ffffff;
  height:50px;
  border: #ffffff;
  padding: 5px 15px 0px 15px;
}
.btn2:hover{
  color: #fa7d55;
}
.btn3:hover{
  color: #fa7d55;
}
.btn3{
  padding: 5px 15px 0px 15px;
  background-color: #ffffff;
  border: #ffffff;
}
.navbar-brand a{
  width: 152px; 
  height: 62px;
  display: block;
  font-size: 0px;
}

</style>